<!DOCTYPE html>
<html lang="en">

	<head>
		<title>博客后台管理首页</title>
		<link rel="icon" href="img/favicon.ico" />
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name=viewport content="width=device-width, initial-scale=1" />
		<link href="semantic/dist/semantic.min.css" rel="stylesheet" />
		<link href="plugins/ionicons/css/ionicons.min.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<link href="plugins/datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />
		<link href="plugins/weather-icons/css/weather-icons-wind.min.css" rel="stylesheet" />
		<link href="plugins/weather-icons/css/weather-icons.min.css" rel="stylesheet" />
		<link href="plugins/chartist/chartist.min.css" rel="stylesheet" />
		<link href="css/chat-page.css" rel="stylesheet" />
		<script src="../js/common/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common/macarons.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common/shine.js" type="text/javascript" charset="utf-8"></script>
		<link rel="shortcut icon" href="img/favicon.ico" />
	</head>

	<body>
		<div id="contextWrap">
			<!--sidebar-->
			<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" style="-webkit-transition-duration: 0.1s; transition-duration: 0.1s;" data-color="grey">
				<a class="item logo" href="index.html">
					<img src="img/logo.png" alt="stagblogo" /><img src="img/thumblogo.png" alt="stagblogo" class="displaynone" />
				</a>
				<div class="ui accordion inverted">
					<a class="title item">
						<i class="ion-speedometer titleIcon icon"></i> 仪表盘 <i class="dropdown icon"></i>
					</a>
					<div class="content">
						<a class="item" href="index.html">
							概况浏览
						</a>
					</div>
				</div>

				<div class="ui divider"></div>
				<a class="item" href="typography.html">
					<i class="ion-printer icon"></i> <span class="colhidden">打印</span>
				</a>
				<a class="item" href="document.html">
					<i class="ion-code icon"></i> <span class="colhidden">写博客</span>
				</a>
				<div class="ui divider"></div>
				<a class="item">
					<div class="ui inverted progress tiny yellow" id="sidebar_progress1">
						<div class="bar">
						</div>
						<div class="label colhidden" style="margin-top: 10px"><span class="colhidden">CPU 使用率</span></div>
					</div>
				</a>
				<a class="item">
					<div class="ui inverted progress tiny teal" id="sidebar_progress2">
						<div class="bar">
						</div>
						<div class="label colhidden" style="margin-top: 10px"><span class="colhidden">硬盘 使用率</span></div>
					</div>
				</a>
				<a class="item">
					<div class="ui inverted progress tiny blue" id="sidebar_progress3">
						<div class="bar">
						</div>
						<div class="label colhidden" style="margin-top: 10px"><span class="colhidden">内存 使用率</span></div>
					</div>
				</a>
				<div class="ui divider"></div>
				<a class="item hiddenCollapse">
					<div class="ui one tiny inverted statistics">
						<div class="statistic">
							<div class="value counter">
								3654
							</div>
							<div class="label">
								浏览数量
							</div>
						</div>
						<div class="statistic">
							<div class="value counter">
								3654
							</div>
							<div class="label">
								点赞数量
							</div>
						</div>
						<div class="statistic">
							<div class="value">
								<i class="ion-paperclip icon"></i><span class="counter">19</span>
							</div>
							<div class="label">
								回复数量
							</div>
						</div>
						<div class="statistic">
							<div class="value">
								<img src="img/avatar/people/carol.png" class="ui circular inline  top aligned image"><span class="counter">212</span>
							</div>
							<div class="label">
								点赞数量
							</div>
						</div>
					</div>
			</div>
			</a>
			<!--sidebar-->

			<div class="pusher">
				<!--navbar-->
				<div class="navslide navwrap">
					<div class="ui menu icon borderless grid" data-color="inverted white">
						<a class="item labeled expandit" onclick="toggleFullScreen(document.body)">
							<i class="ion-arrow-expand big icon"></i>
						</a>
						<div class="item ui colhidden">
							<div class="ui icon input">
								<input type="text" placeholder="搜索...">
								<i class="search icon"></i>
							</div>
						</div>
						<div class="right menu colhidden">
							<div class="ui dropdown item labeled icon">
								<i class="bell icon"></i>
								<div class="ui red label mini circular">6</div>
								<div class="menu">
									<div class="header">
										People You Might Know
									</div>
									<div class="item">
										<img class="ui avatar image" src="img/avatar/people/enid.png" alt="label-image" /> Janice Robinson
									</div>

									<div class="header">
										Your Friends' Friends
									</div>
									<div class="item">
										<img class="ui avatar image" src="img/avatar/people/Meggie.png" alt="label-image" /> Pauline Cain
									</div>

								</div>
							</div>
							<div class="ui dropdown item">
								选择语言 <i class="dropdown icon"></i>
								<div class="menu">
									<a class="item"><i class="china flag"></i>中文</a>
									<a class="item"><i class="united kingdom flag"></i>English</a>
								</div>
							</div>
							<div class="ui dropdown item">
								<img class="ui mini circular image" src="img/avatar/people/enid.png" alt="label-image" />
								<div class="menu">
									<a class="item" href="mail.html">Inbox</a>
									<a class="item" href="profile.html">Profile</a>
									<a class="item" href="settings.html">Settings</a>
									<div class="ui divider"></div>
									<a class="item">Need Help?</a>
									<a class="item" href="login.html">Sign Out</a>
								</div>
							</div>
							<a class="item labeled rightsidebar computer only">
								<i class="ion-wrench large icon"></i>
							</a>
						</div>
					</div>
				</div>
				<!--navbar-->
				<!--maincontent-->
				<div class="mainWrap navslide">
					<div class="ui equal width left aligned padded grid stackable">
						<div class="row">
							<div class="column">
								<div class="ui segments no-padding">
									<div class="ui segment basic no-padding-bottom">
										<h5 class="ui left floated header">
                                        浏览概况
                                        </h5>
										<h5 class="ui right floated header">
                                        <i class="ion-ios-arrow-up icon link" id="arrow"></i>
                                        <i class="ion-ios-refresh-empty refreshing icon link"></i>
                                        <i class="ion-ios-close-empty icon link"></i>
                                        </h5>
										<div class="clearfix"></div>
									</div>
									<div class="ui basic segment no-padding">
										<div class="flot-chart" id="partall" style="width: 100%;height:300px;">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="sixteen wide tablet four wide computer column">
								<div class="ui segment left aligned">
									<div class="label">
										一周概览
									</div>
									<div id="part01" class="flotchart"></div>
								</div>
							</div>
							<div class="sixteen wide tablet four wide computer column">
								<div class="ui segment left aligned">
									<div class="label">
										浏览人数
									</div>
									<div id="part02" class="flotchart"></div>
								</div>
							</div>
							<div class="sixteen wide tablet four wide computer column">
								<div class="ui segment left aligned">
									<div class="label">
										点赞数量
									</div>
									<div id="part03" class="flotchart"></div>
								</div>
							</div>
							<div class="sixteen wide tablet four wide computer column">
								<div class="ui segment left aligned">
									<div class="label">
										回复数量
									</div>
									<div id="part04" class="flotchart"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--maincontent-->
		</div>
		</div>
		<!--jquery-->
		<script src="js/jquery-2.1.4.min.js"></script>
		<!--jquery-->
		<!--semantic-->
		<script src="semantic/dist/semantic.min.js"></script>
		<!--semantic-->
		<!--counter number-->
		<script src="plugins/counterup/jquery.counterup.min.js"></script>
		<script src="plugins/counterup/waypoints.min.js"></script>
		<!--counter number-->
		<script src="plugins/cookie/js.cookie.js"></script>
		<!--flot chart-->
		<script src="plugins/nicescrool/jquery.nicescroll.min.js"></script>
		<script src="js/main.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("partall");
			var myChart = echarts.init(dom, 'shine');
			var app = {};
			option = null;
			option = {
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				legend: {
					data: ['浏览人数', '点赞数量', '回复数量']
				},
				toolbox: {
					feature: {
						//						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: true,
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
						name: '浏览人数',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						data: [130, 152, 111, 234, 110, 30, 110]
					},
					{
						name: '点赞数量',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						data: [33, 11, 333, 123, 45, 63, 12]
					},
					{
						name: '回复数量',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						data: [120, 132, 101, 134, 90, 230, 210]
					}
				]
			};;
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
				$('.ion-ios-refresh-empty').on('click', function() {
					//TODO:实时接口更新
				});
			}
		</script>
		<script type="text/javascript">
			var dom = document.getElementById("part01");
			var myChart_part01 = echarts.init(dom, 'shine');
			var app = {};
			option = null;
			app.title = '';
			option = {
				angleAxis: {
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					z: 10
				},
				radiusAxis: {},
				polar: {},
				series: [{
					type: 'bar',
					data: [1, 2, 3, 4, 3, 5, 1],
					coordinateSystem: 'polar',
					name: '浏览人数',
					stack: 'a'
				}, {
					type: 'bar',
					data: [2, 4, 6, 1, 3, 2, 1],
					coordinateSystem: 'polar',
					name: '点赞数量',
					stack: 'a'
				}, {
					type: 'bar',
					data: [1, 2, 3, 4, 1, 2, 5],
					coordinateSystem: 'polar',
					name: '回复数量',
					stack: 'a'
				}],
				legend: {
					show: true,
					data: ['浏览人数', '点赞数量', '回复数量']
				}
			};;
			if(option && typeof option === "object") {
				myChart_part01.setOption(option, true);
			}
		</script>
		<script type="text/javascript">
			var dom = document.getElementById("part02");
			var myChart_part02 = echarts.init(dom, 'shine');
			var app = {};
			option = null;
			app.title = '浏览人数';
			option = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '浏览人数',
					type: 'bar',
					barWidth: '60%',
					data: [10, 52, 200, 334, 390, 330, 220]
				}]
			};;
			if(option && typeof option === "object") {
				myChart_part02.setOption(option, true);
			}
		</script>
		<script type="text/javascript">
			var dom = document.getElementById("part03");
			var myChart_part03 = echarts.init(dom, 'shine');
			var app = {};
			option = null;
			app.title = '点赞数量';
			option = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '点赞数量',
					type: 'bar',
					barWidth: '60%',
					data: [10, 52, 200, 334, 390, 330, 220]
				}]
			};;
			if(option && typeof option === "object") {
				myChart_part03.setOption(option, true);
			}
		</script>
		<script type="text/javascript">
			var dom = document.getElementById("part04");
			var myChart_part04 = echarts.init(dom, 'shine');
			var app = {};
			option = null;
			app.title = '回复数量';
			option = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '回复数量',
					type: 'bar',
					barWidth: '60%',
					data: [10, 52, 200, 334, 390, 330, 220]
				}]
			};;
			if(option && typeof option === "object") {
				myChart_part04.setOption(option, true);
			}
		</script>

		<script type="text/javascript">
			$('.ion-ios-close-empty').on('click', function(parm) {
				$(this).parent().parent().parent().hide(800);
			});
			var flag = 1;
			$('#arrow').on('click', function() {
				if(flag == 1) {
					$(this).parent().parent().next().hide(800);
					$(this).removeClass('ion-ios-arrow-up');
					$(this).addClass('ion-ios-arrow-down');
					flag--;
				} else {
					$(this).parent().parent().next().show(800);
					$(this).removeClass('ion-ios-arrow-down');
					$(this).addClass('ion-ios-arrow-up');
					flag++;
				}

			});
		</script>
	</body>

</html>